<!--
 * @Description:
 * @Author: Richeneen
 * @Date: 2022-10-12 15:22:48
 * @LastEditTime: 2022-10-23 14:18:23
 * @LastEditors: Richeneen
-->
<template>
  <!-- 顾客账单管理 -->
  <div>
    <!-- 第一行 表单空间按钮 -->
    <div class="header">
      <el-form :inline="true">
        <el-form-item>
          <div class="block">
            <el-date-picker
              v-model="form.dateTime"
              type="daterange"
              align="right"
              value-format="timestamp"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            />
          </div>
        </el-form-item>
        <!-- 选择类型 -->
        <el-form-item>
          <el-select v-model="params.type" clearable placeholder="请选择类型">
            <el-option label="充值" value="充值" />
            <el-option label="消费" value="消费" />
          </el-select>
        </el-form-item>
        <!-- 选择状态 -->
        <el-form-item>
          <el-select v-model="params.status" clearable placeholder="请选择状态">
            <el-option label="正常" value="正常" />
            <el-option label="未审核" value="未审核" />
          </el-select>
        </el-form-item>
        <!-- 员工编号 -->
        <el-form-item>
          <el-select v-model="params.userId" clearable placeholder="顾客编号">
            <el-option
              v-for="item in customers"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form>
    </div>
    <!-- 第一行 输入框和下拉框 -->
    <!-- 第二行 表格 -->
    <div class="table">
      <el-table :data="customersAccount.list" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" />
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="transferMoney" label="交易金额" />
        <el-table-column prop="transferTime" label="交易时间">
          <template slot-scope="scope">
            {{ scope.row.transferTime | fmtDateTime }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="交易类型">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.type === '消费'"
              type="success"
            >消费</el-tag>
            <el-tag v-else type="danger">充值</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '正常'"
              type="success"
            >正常</el-tag>
            <el-tag v-else type="danger">未审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
      </el-table>
    </div>
    <!-- 第二行 表格 结束 -->
    <!-- 第三行 分页 -->
    <div class="page">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[5, 8, 10, 15]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="customersAccount.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 第三行 分页 结束 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 开始时间----结束时间
      form: {
        dateTime: []
      },

      // 查询分页参数
      params: {
        page: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    ...mapGetters(['customers']),
    ...mapGetters(['customersAccount'])
  },
  created() {
    this.$store.dispatch('account/queryCustomer', {
      page: 1,
      pageSize: 10,
      id: 6
    })
    this.$store.dispatch('account/queryCustomerAccount', this.params)
  },
  mounted() {},
  methods: {
    // 查询按钮事件
    onSearch() {
      const temp = { ...this.params }
      if (this.form.dateTime) {
        temp.beginTime = this.form.dateTime[0]
        temp.endTime = this.form.dateTime[1]
      }
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      // console.log(temp,'11111');
      this.$store.dispatch('account/queryCustomerAccount', temp)
    },
    // 页码条数改变事件
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.$store.dispatch('account/queryCustomerAccount', this.params)
    },
    // 当前页改变事件
    handleCurrentChange(page) {
      this.params.page = page
      this.$store.dispatch('account/queryCustomerAccount', this.params)
    }
  }
}
</script>
<style scoped>
</style>
